<template>
  <div class="page-container">
    <el-button class="ml-auto" type="primary" size="default" @click="router.push({ name: 'ExploitVersion' })">
      查看版本
    </el-button>
    <hr class="mt-6 mb-4" />
    el主题色使用
    <pre><code>var(--el-color-primary)</code></pre>
    <hr class="mt-6 mb-4" />
    <h3>响应式布局</h3>
    <p>移动端(sm)：width &lt;=768px，width > 760</p>
    <p>平板(md)：width &lt;=990</p>
    <p>桌面(lg)：width > 990</p>
    <hr class="mt-6 mb-4" />
    <el-row :gutter="10">
      <el-col :sm="24" :md="12" :lg="8">
        <div class="bg-green w-full">
          <p class="text-align-center">网页内置宽</p>
          <p class="text-align-center">{{ clgwindow.innerWidth }}</p>
        </div>
      </el-col>
      <el-col :sm="24" :md="12" :lg="8">
        <div class="bg-green w-full">
          <p class="text-align-center">网页内置高</p>
          <p class="text-align-center">{{ clgwindow.innerHeight }}</p>
        </div>
      </el-col>
      <el-col :sm="24" :md="12" :lg="8">
        <div class="bg-green w-full">
          <p class="text-align-center">屏幕分辨率的高</p>
          <p class="text-align-center">{{ screen.height }}</p>
        </div>
      </el-col>

      <el-col :sm="24" :md="12" :lg="8">
        <div class="bg-green w-full">
          <p class="text-align-center">屏幕分辨率的宽</p>
          <p class="text-align-center">{{ screen.width }}</p>
        </div>
      </el-col>

      <el-col :sm="24" :md="12" :lg="8">
        <div class="bg-green w-full">
          <p class="text-align-center">网页可见区域宽</p>
          <p class="text-align-center">{{ clgdocument.body.clientWidth }}</p>
        </div>
      </el-col>

      <el-col :sm="24" :md="12" :lg="8">
        <div class="bg-green w-full">
          <p class="text-align-center">网页可见区域高</p>
          <p class="text-align-center">{{ clgdocument.body.clientHeight }}</p>
        </div>
      </el-col>

      <el-col :sm="24" :md="12" :lg="8">
        <div class="bg-green w-full">
          <p class="text-align-center">获取屏幕宽度</p>
          <p class="text-align-center">
            {{ screen.width }} * {{ clgwindow.devicePixelRatio }} |
            {{ screen.width * clgwindow.devicePixelRatio }}
          </p>
        </div>
      </el-col>

      <el-col :sm="24" :md="12" :lg="8">
        <div class="bg-green w-full">
          <p class="text-align-center">获取屏幕高度</p>
          <p class="text-align-center">
            {{ screen.height }} * {{ clgwindow.devicePixelRatio }} |
            {{ screen.height * clgwindow.devicePixelRatio }}
          </p>
        </div>
      </el-col>
    </el-row>

    <!-- <hr class="mt-[30px] mb-[20px]" />
    svg-icon 的 使用
    <div class="flex flex-items-center">
      <SvgIcon name="def" f="#787849" w="60px" h="70px" class="mr-[20px]" />
      <pre><code>&lt;svg-icon name="def" f="#787849" w="60px" h="70px" &lt;/svg-icon&gt;</code></pre>
    </div>
    <div class="flex flex-items-center">
      <svg-icon name="def" f="#287868" class="mr-[20px]" />
      <pre><code>&lt;svg-icon name="def" f="#287868" &lt;/svg-icon&gt;</code></pre>
    </div>

    <p class="mt-[10px]">外层scss修改fill</p>
    <pre>
      <code>
        :deep(.svg-def path) {
          fill: forestgreen !important;
        }
      </code>
    </pre>

    <hr class="mt-[30px] mb-[20px]" />
    <p class="mt-[10px]">拖拽上传弹窗</p>
    <el-button type="primary" size="default" @click="handleUploadOpen">{{ $t("upload.title") }}</el-button>
    <BaseDragUpload v-if="uploadDialogShow" v-model:uploadDialogShow="uploadDialogShow" @on-save="handleUploadSave" />
    <pre>
      <code>
        &lt;BaseDragUpload v-model:uploadDialogShow="uploadDialogShow" @on-save="handleUploadSave" />
      </code>
    </pre>
    <hr class="mt-[30px] mb-[20px]" />
    <p class="mt-[10px]">置空图</p>
    <p class="mt-[10px]">置空图 - 默认值</p>
    <div class="w-[500px] h-[300px]">
      <BaseEmpty />
    </div>
    <pre>
      <code>
        &lt;BaseEmpty />
      </code>
    </pre>
    <p class="mt-[10px]">置空图 - 表格</p>
    <div class="h-[530px]">
      <el-table :data="tableData" style="width: 100%">
        <el-table-column prop="date" label="Date" width="180" />
        <el-table-column prop="name" label="Name" width="180" />
        <el-table-column prop="address" label="Address" />
        <template #empty>
          <BaseEmpty type="table" top="25%" />
        </template>
      </el-table>
    </div>
    <pre>
      <code>
        &lt;template #empty>
          &lt;BaseEmpty type="table" top="25%" />
        &lt;/template>
      </code>
    </pre>
    <p class="mt-[10px]">置空图 - 非默认图(图片一定要放在assets/img下)</p>
    <div class="w-[200px] h-[230px]">
      <BaseEmpty type="small" top="25%" ImgSrcName="login-bg.webp" />
    </div>
    <pre>
      <code>
        &lt;BaseEmpty type="small" top="25%" ImgSrcName="login-bg.webp" />
      </code>
    </pre> -->
    <!-- <div class="bg-green m-2 w-[30px] h-[230px] text-truncate">单行隐藏,123总分热舞如风额外热舞额外额外温热</div>
    <div class="bg-green m-2 w-[30px] h-[230px] truncate">单行隐藏,123总分热舞如风额外热舞额外额外温热</div>
    <div class="bg-green m-2 w-[60px] h-[230px]">
      <div class="line-clamp-3 ws-normal text-ellipsis">
        3行隐藏123总分热舞如风额外热舞额外额外温热123总分热舞如风额外热舞额外额外温热
      </div>
    </div>
    <div class="bg-green m-2 w-[100px] h-[230px]">
      <div class="cs" >
        CSS原子化 在前端开发中,CSS原子化(Atomic CSS)是一种设计和编写CSS样式的方法论。它的核心思想是将样式属性拆分为独立的、可重用的类名,每个类名仅定义一个样式属性 优点 原子化
      </div>
    </div> -->
  </div>
</template>

<script setup lang="ts">
import BaseDragUpload from "@/components/BaseUpload/dragDialog.vue";
import BaseEmpty from "@/components/BaseEmpty/index.vue";
import { useRouter } from "vue-router";
import { ref, reactive } from "vue";
const uploadDialogShow = ref(false);
const handleUploadOpen = () => {
  uploadDialogShow.value = true;
};
const router = useRouter();
const handleUploadSave = () => {
  // uploadDialogShow.value = false
};

const tableData = [];

const screen = reactive(window.screen);
const clgwindow = reactive(window);
const clgdocument = reactive(document);
</script>

<style lang="scss" scoped>
.el-col {
  margin-top: 10px;
}

.cs {
  display: -webkit-box;
  overflow: hidden;
  text-overflow: ellipsis;
  -webkit-line-clamp: 3; // 控制多行的行数
  -webkit-box-orient: vertical;
}

:deep(.svg-def path) {
  fill: forestgreen !important;
}
</style>
